{% extends "base.html" %}
{% block content %}
<div class="bg-white rounded-xl shadow-md p-6">
  <h1 class="text-2xl font-bold mb-6">个人设置</h1>
  
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <!-- 左侧：头像修改区域 -->
    <div class="md:col-span-1">
      <div class="bg-gray-50 rounded-lg p-5 text-center">
        <div class="relative w-24 h-24 mx-auto mb-4">
          <!-- 头像显示 -->
          {% if user.avatar %}
            <img id="avatar-display" src="{{ url_for('static', filename='uploads/avatars/' + user.avatar) }}" 
                 alt="用户头像" class="w-full h-full rounded-full object-cover shadow-md">
          {% else %}
            <div id="avatar-placeholder" class="w-full h-full rounded-full bg-primary/10 flex items-center justify-center">
              <i class="fa fa-user-circle text-5xl text-primary"></i>
            </div>
          {% endif %}
          
          <!-- 上传按钮（关联原生input的id） -->
          <label for="avatar-upload" class="absolute bottom-0 right-0 bg-white rounded-full p-1.5 shadow-md cursor-pointer hover:bg-gray-100 transition-colors">
            <i class="fa fa-camera text-primary"></i>
          </label>
        </div>
        
        <h2 class="font-bold text-lg mb-1">{{ user.username }}</h2>
        <p class="text-gray-500 text-sm mb-4">{{ user.email }}</p>
        <p class="text-xs text-gray-400 mt-2">支持 JPG、PNG 格式，最大 2MB</p>
      </div>
    </div>

    <!-- 右侧：设置表单区域 -->
    <div class="md:col-span-2">
      <form method="POST" enctype="multipart/form-data" class="space-y-5">
        <!-- CSRF令牌（必须保留，Flask-WTF自动处理） -->
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        
        <!-- 用户名（只读） -->
        <div class="space-y-2">
          <label class="block text-sm font-medium text-gray-700">用户名</label>
          <input type="text" value="{{ user.username }}" class="form-input" readonly>
        </div>
        
        <!-- 邮箱 -->
        <div class="space-y-2">
          <label class="block text-sm font-medium text-gray-700">邮箱</label>
          <input type="email" name="email" value="{{ user.email }}" class="form-input">
        </div>
        
        <!-- 新密码 -->
        <div class="space-y-2">
          <label class="block text-sm font-medium text-gray-700">新密码</label>
          <input type="password" name="password" placeholder="不修改则留空" class="form-input">
        </div>
        
        <!-- 确认新密码 -->
        <div class="space-y-2">
          <label class="block text-sm font-medium text-gray-700">确认新密码</label>
          <input type="password" name="confirm_password" placeholder="不修改则留空" class="form-input">
        </div>
        
        <!-- 头像上传input（隐藏，通过label触发） -->
        <input type="file" id="avatar-upload" name="avatar" accept="image/*" class="hidden">
        
        <!-- 操作按钮 -->
        <div class="pt-2">
          <button type="submit" class="btn-primary">
            <i class="fa fa-save mr-1"></i> 保存设置
          </button>
          <a href="{{ url_for('problems') }}" class="btn-secondary ml-3">
            <i class="fa fa-times mr-1"></i> 取消
          </a>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- 头像预览JS -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const avatarInput = document.getElementById('avatar-upload');
    const avatarDisplay = document.getElementById('avatar-display');
    const avatarPlaceholder = document.getElementById('avatar-placeholder');
    
    if (avatarInput) {
      avatarInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
          // 验证文件类型
          const allowedTypes = ['image/jpeg', 'image/png'];
          if (!allowedTypes.includes(file.type)) {
            alert('请上传 JPG 或 PNG 格式的图片');
            avatarInput.value = '';
            return;
          }
          
          // 验证文件大小
          if (file.size > 2 * 1024 * 1024) {
            alert('图片大小不能超过 2MB');
            avatarInput.value = '';
            return;
          }
          
          // 预览图片
          const reader = new FileReader();
          reader.onload = function(event) {
            if (avatarPlaceholder) {
              const img = document.createElement('img');
              img.id = 'avatar-display';
              img.src = event.target.result;
              img.alt = '用户头像';
              img.className = 'w-full h-full rounded-full object-cover shadow-md';
              avatarPlaceholder.parentNode.replaceChild(img, avatarPlaceholder);
            } else if (avatarDisplay) {
              avatarDisplay.src = event.target.result;
            }
          };
          reader.readAsDataURL(file);
        }
      });
    }
  });
</script>
{% endblock %}